<!DOCTYPE html>
<html>
	<head>
		<title>Setting loading position</title>
		<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8">
		<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="../common/samples.css">
		<script src="../common/testdata.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class='header_comment'>Setting loading position</div>
		<div class='sample_comment'>Data is loaded from the first record (default behaviour).</div>
		<div id="testA"></div>
		<hr>
		<div class='sample_comment'>Data is loaded from the 900th record. The "loadNext" method is used.</div>
		<div id="testB"></div>
		<hr>
		<div class='sample_comment'>Data is loaded from the 500th record. Programmatic scrolling is used. </div>
		<div id="testC"></div>
		<hr>
		
		<script type="text/javascript" charset="utf-8">

		webix.ready(function(){
			var grida = webix.ui({
				container:"testA",
				view:"datatable",
				columns:[
                    { id:"id", header:"", css:{"text-align":"center"}, width:50 },
					{ id:"package",	header:"Name", 			width:200 },
					{ id:"section",	header:"Section",		width:120 },
					{ id:"size",	header:"Size" , 		width:80  },
					{ id:"architecture",	header:"PC", 	width:60  }
				],
                yCount:5,
				autowidth:true,
				url:"data/data_dyn.php"
			});
		});

		webix.ready(function(){
			var gridb = webix.ui({
				container:"testB",
				view:"datatable",
				columns:[
                    { id:"id", header:"", css:{"text-align":"center"}, width:50 },
					{ id:"package",	header:"Name", 			width:200 },
					{ id:"section",	header:"Section",		width:120 },
					{ id:"size",	header:"Size" , 		width:80  },
					{ id:"architecture",	header:"PC", 	width:60  }
				],
                yCount:5,
				autowidth:true
			});
			gridb.loadNext(50,900,function(){
			    this.showItem(903);
            }, "data/data_dyn.php");


		});

		webix.ready(function(){
			var gridc = webix.ui({
				container:"testC",
				view:"datatable",
				columns:[
                    { id:"id", header:"", css:{"text-align":"center"}, width:50 },
					{ id:"package",	header:"Name", 			width:200 },
					{ id:"section",	header:"Section",		width:120 },
					{ id:"size",	header:"Size" , 		width:80  },
					{ id:"architecture",	header:"PC", 	width:60  }
				],
                yCount:5,
				autowidth:true,
				url:"data/data_dyn.php",
				ready:function(){
					this.showItemByIndex(500);
				}
			});
		});
		</script>
	</body>
</html>